<!--  <template>
  <div class="box">
    <div>
      <div class="box1"></div>
      角色权限
    </div>

    <div class="btn">
      <el-button> 保存权限 </el-button>
    </div>
  </div>
  <div class="left">
    <div class="left-top">
      <h1 style="font-weight: 700">角色列表</h1>
      <el-button
        size="small"
        style="background-color: orange; color: #fff"
        @click="dialogFormVisible = true"
        
        >新增角色</el-button
      >
      <el-dialog v-model="dialogFormVisible" title="新增角色">
        <el-form :model="role">
          <el-form-item label="角色名称" :label-width="formLabelWidth">
            <el-input
              v-model="role.name"
              autocomplete="off"
              placeholder="请输入角色名称"
            />
          </el-form-item>
          <hr />
        </el-form>

        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="addFn"
              >确定
            </el-button>
            <el-button @click="dialogFormVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <el-input
      style="padding: 5px"
      v-model="input2"
      class="w-50 m-2"
      placeholder="请输入角色名称"
    />

    <el-check-tag
      style="background-color: #fff; margin-top: 5px"
      :checked="checked"
      @change="onChange"
      v-for="item in role" :key="item"
      ><span style="font-size: 12px; margin-left: -10px">{{ roleData.name }}</span>
      <div>
        <el-icon style="margin-right: 10px"><Edit /></el-icon
        ><el-icon style="margin-right: -10px"><DeleteFilled /></el-icon></div
    ></el-check-tag>
   
  </div>
  <div class="right">
    <div class="right-top">
      <h1 style="font-weight: 700">功能授权</h1>
    </div>

    <div class="right-center">
      <span style="margin-left: 10px">首页</span>
    </div>
    <div
      style="
        height: 60px;
        margin-bottom: 10px;
        border-bottom: 1px solid #ededed;
        line-height: 60px;
      "
    >
      <el-checkbox style="margin-left: 30px" label="平台首页" />
    </div>
    <div class="right-center1">
      <span style="margin-left: 10px">承建商管理</span>
    </div>
    <div style="margin-left: 30px; min-height: 60px; border: 1px solid #ededed">
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="defaultProps"
      />
    </div>
    <div class="right-center1">
      <span style="margin-left: 10px">考勤管理</span>
    </div>
    <div style="margin-left: 30px; min-height: 60px; border: 1px solid #ededed">
      <el-tree
        :data="data1"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="defaultProps"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import service from "../../../utils/service";
import { ElMessage } from "element-plus";
import { Edit, DeleteFilled } from "@element-plus/icons-vue";

//获取角色列表数据
interface IRole{
  id:number,
  name:string,
  checkkeys:string
}
const roleData = reactive<IRole>({
  id:0,
  name:"",
  checkkeys:""
})

const getData = ()=>{
  service({
    url:"permissionslist",
    method:"get"
  }).then((res)=>{
    roleData.length = 0
    roleData.push(...res.data)
  })
}


// 新增
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

interface IForm {
  id: number;
  name: string;
  checkkeys: string;
}
const role = reactive<IForm>({
  id: 0,
  name: "",
  checkkeys: "",
});
const addFn = ()=>{
  service({
    url:"permissionslist",
    method:"post",
    data:role
  }).then((res)=>{
    dialogFormVisible.value = false;
      ElMessage({
        message:"添加成功",
        type:"success"
      })
  })
}

const defaultProps = {
  children: "children",
  label: "label",
};
const data = [
  {
    id: 1,
    label: "承建商登记",
    children: [
      {
        id: 4,
        label: "新增",
      },
      {
        id: 5,
        label: "导出",
      },
      {
        id: 6,
        label: "编辑",
      },
      {
        id: 7,
        label: "删除",
      },
      {
        id: 8,
        label: "查看",
      },
    ],
  },
  {
    id: 2,
    label: "班组管理",
    children: [
      {
        id: 9,
        label: "新增",
      },
      {
        id: 10,
        label: "编辑",
      },
      {
        id: 11,
        label: "删除",
      },
    ],
  },
  {
    id: 3,
    label: "用户账号",
    children: [
      {
        id: 12,
        label: "新增",
      },
      {
        id: 13,
        label: "编辑",
      },
      {
        id: 14,
        label: "启用",
      },
      {
        id: 15,
        label: "密码重置",
      },
    ],
  },
];
const data1 = [
  {
    id: 1,
    label: "考勤组管理",
    children: [
      {
        id: 4,
        label: "新增",
      },
      {
        id: 5,
        label: "导入",
      },
      {
        id: 6,
        label: "导出",
      },
      {
        id: 7,
        label: "编辑",
      },
      {
        id: 8,
        label: "删除",
      },
      {
        id: 9,
        label: "查看",
      },
    ],
  },
  {
    id: 2,
    label: "考勤规则定义",
    children: [
      {
        id: 10,
        label: "新增",
      },
      {
        id: 11,
        label: "编辑",
      },
      {
        id: 12,
        label: "删除",
      },
      {
        id: 13,
        label: "查看",
      },
    ],
  },
  {
    id: 3,
    label: "考勤记录查询",
    children: [
      {
        id: 14,
        label: "导出",
      },
    ],
  },
  {
    id: 15,
    label: "考勤统计分析",
    children: [
      {
        id: 16,
        label: "出勤统计表导出",
      },
      {
        id: 17,
        label: "出勤时长统计表导出",
      },
    ],
  },
];
</script>

<style scoped>
.box {
  width: 100%;
  height: 50px;
  background-color: rgba(128, 128, 128, 0.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: gray;
  margin-bottom: 20px;
}
.box .box1 {
  width: 5px;
  height: 15px;
  background-color: greenyellow;
  float: left;
  margin-right: 5px;
}
.left {
  width: 20%;
  min-height: 600px;
  border: 1px solid rgba(128, 128, 128, 0.161);
  float: left;
}
.left .left-top {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}
.left .left-center {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.left .left-buttom {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.left .el-check-tag {
  display: flex;
  justify-content: space-between;
}
.right {
  width: 79%;
  min-height: 600px;
  border: 1px solid rgba(128, 128, 128, 0.161);
  float: right;
}
.right .right-top {
  height: 60px;
  line-height: 60px;
  margin-left: 20px;
}
.right .right-center {
  height: 35px;
  line-height: 35px;
  background-color: #ededed;
  border-top: 1px solid rgba(128, 128, 128, 0.23);
  border-bottom: 1px solid rgba(128, 128, 128, 0.23);
}
.right .right-center1 {
  height: 35px;
  line-height: 35px;
  background-color: #ededed;
  border-top: 1px solid rgba(128, 128, 128, 0.23);
  border-bottom: 1px solid rgba(128, 128, 128, 0.23);
}
</style> -->



<template>
  <a-form :model="formState" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" autocomplete="off"
    @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item label="用户名" name="用户名">
      <a-input v-model:value="formState.username" @input="en1" />
      <span class="sp" v-show="spp">用户名有误</span>
    </a-form-item>

    <a-form-item label="密码" name="密码">
      <a-input-password v-model:value="formState.password" @input="en2" />
      <span class="sp1" v-show="spp1">密码有误</span>
    </a-form-item>

    <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys"
      checkable :tree-data="treeData">
      <template #title="{ title, key }">
        <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
        <template v-else>{{ title }}</template>
      </template>
    </a-tree>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit" @click="submit">提交</a-button>
    </a-form-item>

  </a-form>
</template>

<script lang="ts" setup>
import type { TreeProps } from 'ant-design-vue';
import { ElMessage } from 'element-plus';
import { ref, watch, reactive } from 'vue';
import { menudata as data } from '../../../grants/menudata';
import service from './../../../utils/service';

const treeData: TreeProps['treeData'] = data;

const expandedKeys = ref<string[]>([]);
const selectedKeys = ref<string[]>([]);
const checkedKeys = ref<string[]>([]);
watch(expandedKeys, () => {
  console.log('expandedKeys', expandedKeys);
});

watch(selectedKeys, () => {
  // mydata.selectedKeys = selectedKeys
});
watch(checkedKeys, () => {
  console.log('checkedKeys', checkedKeys);
});

// 用户名密码添加

interface FormState {
  username: string;
  password: string;
}

const formState = reactive<FormState>({
  username: '',
  password: ''
});

const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
let reg1 = /^[a-zA-Z0-9_-]{4,16}$/;
let reg2 = /^[a-zA-Z0-9_-]{4,16}$/;
let spp = ref<boolean>(false);
let spp1 = ref<boolean>(false);

const en1 = () => {
  if (reg1.test(formState.username) == false && formState.username != '') {
    spp.value = true;
  } else {
    spp.value = false;
  }
};

const en2 = () => {
  if (reg2.test(formState.password) == false && formState.password != '') {
    spp1.value = true;
  } else {
    spp1.value = false;
  }
};

const submit = () => {

  service({
    url: "restrictx",
    method: "post",
    data: {
      "username": formState.username,
      "password": formState.password,
      "checkedKeys": checkedKeys.value
    }
  }).then((res) => {
    ElMessage({
      message: "添加成功",
      type: "success"
    })
    formState.username = "";
    formState.password = "";
    console.log(res.data);

  }
  )
}
</script>
<style scoped>
.ant-input {
  width: 300px;
}

.ant-input-password {
  width: 300px;
}

.ant-form-item {
  width: 500px;
  margin-top: 20px;
}

.sp {
  display: block;
  width: 90px;
  height: 15px;
  color: red;
}

.sp1 {
  display: block;
  width: 70px;
  height: 15px;
  color: red;
}
</style>